Text field

The input type="text" defines a one-line text input field:

Note that the form itself is not visible.

Also note that the default width of a text field is 20 characters.

Password field

The input type="password" defines a password field:

The characters in a password field are masked (shown as asterisks or circles).

Submit Button

The input type="submit" defines a button for submitting form data to a form-handler:

If you click "Submit", the form-data will be sent to a page called "/action_page.php".

Reset Button

The input type="reset" defines a reset button that resets all form values to their default values:

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

Radio Buttons

The input type="radio" defines a radio button:

Choose your favorite Web language:

Checkboxes

The input type="checkbox" defines a checkbox:

Input Button

Show a Color Picker

The input type="color" is used for input fields that should contain a color.

Note: type="color" is not supported in Internet Explorer 11.

Date Field

The input type="date" is used for input fields that should contain a date.

Note: type="date" is not supported in Internet Explorer 11.

Date Field Restrictions

Use the min and max attributes to add restrictions to dates:

Note: type="date" is not supported in Internet Explorer 11.

Local Date Field

The input type="datetime-local" specifies a date and time input field, with no time zone.

Note: type="datetime-local" is not supported in Internet Explorer 11.

Email Field

The input type="email" is used for input fields that should contain an e-mail address:

Display an Image as the Submit button

Note: The input type="image" sends the X and Y coordinates of the click that activated the image button.

File upload

Show a file-select field which allows a file to be chosen for upload:

A Hidden Field (look in source code)

Note: The hidden field is not shown to the user, but the data is sent when the form is submitted.

Month Field

The input type="month" allows the user to select a month and year.

Note: type="month" is not supported in Firefox, Safari, or Internet Explorer 11.

Number Field

The input type="number" defines a numeric input field.

You can use the min and max attributes to add numeric restrictions in the input field:

Numeric Steps

Depending on browser support: Fixed steps will apply in the input field.

Range Field

Depending on browser support: The input type "range" can be displayed as a slider control.

Search Field

The input type="search" is used for search fields (behaves like a regular text field):

Telephone Field

The input type="tel" is used for input fields that should contain a telephone number:

Show a Time Input Control

The input type="time" allows the user to select a time (no time zone):

If the browser supports it, a time picker pops up when entering the input field.

Note: type="time" is not supported in Internet Explorer 11.

Display a URL Input Field

The input type="url" is used for input fields that should contain a URL address:

Display a Week Input Control

The input type="week" allows the user to select a week and year.

If the browser supports it, a date picker pops up when entering the input field.

Note: type="week" is not supported in Firefox, Safari or Internet Explorer 11.